<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>是美食 | 离美味更近</title>
    <link rel="shortcut icon" href="images/flower.png">
    <link rel="stylesheet" href="css/details.css">
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
</head>
<body>
    <nav id="nav">
        <div class="lay">
            <div class="logo">
                <a href="index.html" class="logo"><img src="images/flower.png" class="" alt="是美食"></a>
            </div>

            <div class="category">
                <label for="searcher">
                    <input id="searcher" type="search" placeholder="搜索">
                    <img src="images/search.png" height="30" width="30"/>
                </label>
            </div>

            <div class="info">
                <ul>
                    <li id="wish"><a><img src="images/wish1.png" height="29" width="29" alt="收藏"/></a></li>
                    <li id="map"><a><img src="images/map.png" height="29" width="29" alt="美食地图"/></a></li>
                    <li id="mine"><a><img src="images/mine.png" height="30" width="30" alt="我的"/></a></li>
                    <li id="night" style="margin-left: 20%;"><a><img src="images/Night.png" height="30" width="30" alt="夜间模式"/></a></li>
                </ul>
            </div>
        </div>
    </nav>

<!--    内容-->
    <main class="main">
        <section id="title">
            <h3>法式羊排与菠菜色拉</h3>
        </section>

        <section id="introduce">
            <img style="margin-left: 90px;" src="images/pai.jpg" height="414" width="540"/>
            <div class="words">
                <p>这是一道所有爱羊排的人的最爱。羊排经过嫩煎保持了最佳的肉质——鲜嫩、多汁、美味。再加上有多种天然草本香料混合微微酸甜的芥末酱，让羊排的强烈口感得到很好的平衡。我们不忘加上炒到鲜香的面包碎，让本就香嫩多汁的羊排表面又多了一层松脆可口的味蕾享受。</p>
                <p>相比其他动物蛋白，羊肉是瘦肉，胆固醇低。事实上，羊肉中的一般脂肪为不饱和脂肪——类似于橄榄油中的健康脂肪。一个3盎司（85克）的羊排只有5克脂肪，同量的猪肉有800克脂肪，而同量的大西洋鲑鱼有10克脂肪。</p>
            </div>
        </section>

        <a id="open_details">食材<img src="images/open_and_close.png" height="30" width="30"/></a>
        <section id="details" style="display: none;">

            <div style="margin-top: 20px;"></div>
            <div class="menu">
                <hr>
                <p>2茶匙 盐 、 1茶匙 白胡椒</p>
                <p>2汤匙 芥末</p>
                <p>1块 澳洲羊排</p>
                <p>1碗 菠菜</p>
                <p>1把 薄荷 、 1把欧芹</p>
                <p>1束 迷迭香</p>
                <p>1/9杯核桃仁 、 1/4杯羊奶芝士、 1/2杯橄榄油 、 1/3杯面包糠</p>
                <hr>

                <div class="steps">
                    <ul>
                        <li>
                            <img src="images/step1.jpg" height="196" width="294" alt="准备食材"/>
                            <p>1.  准备食材</p>
                            <p>欧芹，薄荷叶切成细末。核桃仁切碎。小萝卜切成薄片后放入饮用水里浸泡备用。</p>
                        </li>
                        <li>
                            <img src="images/step3.jpg" height="196" width="294"/>
                            <p>2. 炒面包碎</p>
                            <p>在热锅里中火融化黄油，放入面包碎，待黄油和面包碎搅拌均匀后调至小火继续翻炒，直到面包碎变成焦糖色。最后倒入切碎的薄荷叶和荷兰芹碎。加入盐和胡椒调味。</p>
                        </li>
                        <li>
                            <img src="images/step4.jpg" height="196" width="294"/>
                            <p>3. 煎羊排</p>
                            <p>在煎羊排前，用小刀去掉多余的脂肪，在羊排表面均匀地撒些盐和胡椒。在热煎锅里倒入橄榄油，当油温达到八成热时放入迷迭香和羊排，羊排先煎脂肪那一面，用小刀戳进羊排，检查熟度，煎成个人喜欢的熟度即可。（家里有烤箱可以在羊排四面都上色时放入185度的烤箱里烘烤）。</p>
                        </li>
                        <li>
                            <img src="images/step5.jpg" height="196" width="294"/>
                            <p>4. 涂芥末与面包碎</p>
                            <p>在煎好的羊排的脂肪面，涂抹芥末酱，然后把面包碎混合物粘在芥末酱上。</p>
                        </li>
                        <li>
                            <img src="images/step6.jpg" height="196" width="294"/>
                            <p>5.  做色拉</p>
                            <p>将菠菜、羊奶芝士、核桃仁碎和小萝卜片略微搅拌混合，搭配芥末酱和蜂蜜作为色拉的酱汁。</p>
                        </li>
                        <li>
<!--                            <img src="images/step6.jpg" height="196" width="294"/>-->
                            <p>6.  装盘</p>
                            <p>将盘子放入微波炉中稍微加热，可适当加热羊排，将色拉搭配羊排一起享用。</p>
                        </li>
                    </ul>
                </div>
                <hr>
            </div>
        </section>

        <section id="Guestbook">
            <h3>为美食留言</h3>
            <label>
                <textarea id="input" class="txt" cols="50" rows="5"></textarea>
            </label>
            <div style="margin-top: 7px;"></div>
            <button class="btn">点击留言</button>
            <div style="margin-top: 12px;"></div>
            <ul id="tellUl">
                <li>
                    <div class="tells">
                        <div class="hd">
                            <img src="images/hd.png" height="50" width="50" alt="头像"/>
                        </div>
                        <span>hui</span>
<!--                        <label>-->
<!--                            <textarea id="pri">看起来好有食欲！加入收藏了！</textarea>-->
                        <p>看起来好有食欲！加入收藏了！</p>
<!--                        </label>-->
                    </div>
                </li>
            </ul>
        </section>
    </main>

    <div class="gotoTop">
        <div class="top">
            <a href="#">
                <img src="images/top.png" height="36" width="36"/>
            </a>
        </div>
        <div class="qr">
            <a href="#">
                <img src="images/qrsmall.png" height="36" width="36"/>
            </a>
        </div>
        <div class="qrHidden"></div>
    </div>

    <footer class="footer">
        <div>
            <span>&nbsp;&nbsp;&nbsp;是美食 © 2022 Copyright</span>
        </div>
        <div>
            <span style="float: right;">Designed by <a target="_blank" href="https://user.qzone.qq.com/87403565" style="text-decoration: none;font-size: small!important;">hui~&nbsp;&nbsp;&nbsp;</a></span>
        </div>
    </footer>

</body>
<script src="js/jquery-3.6.0.js"></script>
<script src="js/details.js"></script>
<script src="js/alert.js"></script>
</html>